<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 20px">
      <el-form-item label="用户名">
        <el-input v-model="formInline.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-button type="primary" round style="float: right" @click="dialogFormVisible = true">添加</el-button>
    </el-form>

    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
      <el-table-column prop="userId" label="编号" width="90">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="200">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="150">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="70">
        <template slot-scope="scope">
          <p v-if="scope.row.status==1">正常</p>
          <p v-if="scope.row.status==0">禁用</p>
        </template>
      </el-table-column>
      <el-table-column prop="createTime"  :formatter="dateFormat" label="创建时间" width="190">
      </el-table-column>
      <el-table-column label="操作" >
        <template  slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delete1(scope.row,scope.$index)"
                     circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 6, 12, 24]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>


    <el-dialog title="用户添加" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="用户名" >
          <el-col :span="18">
            <el-input v-model="form.username" placeholder="用户名"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" >
          <el-col :span="18">
            <el-input v-model="form.password" placeholder="密码"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="form.roleId" placeholder="请选择活动区域">
            <el-option label="管理员" value="5"></el-option>
            <el-option label="普通用户" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="email" >
          <el-col :span="18">
            <el-input v-model="form.email" placeholder="email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="电话" >
          <el-col :span="18">
            <el-input v-model="form.mobile" placeholder="电话"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
const axios = require('axios')
export default {
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      currentPage: 1, // 当前页
      pageSize: 3, // 页面大小
      formInline: {
        username: ''
      },
      form: {
        username: '',
        password: '',
        email: '',
        mobile: '',
        roleId: ''
      }
    }
  },
  methods: {
    dateFormat:function(row,column){

      let date = row[column.property];

      if(date == null){return ''};

      return moment(date).format("YYYY-MM-DD HH:mm:ss")

    },
    addUser(){
      alert(this.form.roleId)
      alert(this.form.username)
      axios.post('http://localhost:8080/sysUser/insert',{
        username: this.form.username,
        password: this.form.password,
        email: this.form.email,
        mobile: this.form.mobile,
        roleId: this.form.roleId
      }).then((response) => {
          if(response){
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.onSubmit()
            this.dialogFormVisible=false
          }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    onSubmit () {
      axios.post('http://localhost:8080/sysUser/userAllByName',{username: this.formInline.username}).then((response) => {
        this.tableData = response.data
      })
    },
    handleSizeChange: function (pagesize) {
      this.pageSize = pagesize
    },
    handleCurrentChange: function (currentpage) {
      this.currentPage = currentpage
    },
    delete1(row,index) {
      let that=this
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios.post("http://localhost:8080/sysUser/delete",{
          userId:row.userId
        }).then(res=>{
          if(res){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //this.tableData.splice(index,1)
            if (this.tableData.length % this.pageSize === 1 && this.currentPage !== 1) {
              this.currentPage = this.currentPage - 1
            }
            this.onSubmit()
          }else{
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created () {
    // eslint-disable-next-line no-unused-vars
    axios.post('http://localhost:8080/sysUser/userAll').then((response) => {
      this.tableData = response.data
    })
  }
}
</script>

<style scoped>

</style>
